<template>
	<!-- 订单详情 -->
	<view>
		<MyNavbar title="订单详情" />
		<u-notice-bar text="部分数据是固定静态的"/>
		<div v-if="orderData">
			<!-- 订单状态 -->
			<div style="margin: 24rpx;text-align: center;font-weight: bold;font-size: 52rpx;">
				待消费
			</div>
			
			<u-cell style="background-color: #FFFFFF;" title="小栗旬理发店">
				<div slot="label">
					<div class="flex">
						<div>
							<u-image width="200rpx" height="200rpx" :src="orderData.poster" />
						</div>
						<div style="margin-left: 12rpx;">
							<div>{{orderData.orderTitle}}</div>
							<!-- <div>场次：{{orderData.specName}}</div> -->
							<div style="color: red;"><span>￥</span>{{orderData.totalPrice}}</div>
						</div>
					</div>
				</div>
			</u-cell>
			
			<u-cell style="background-color: #FFFFFF;margin-top: 24rpx;" title="消费项目">
				<div slot="label">
					<div class="flex">
						<span>1.</span>
						<span>洗头</span>
						<span style="color: red;margin-left: 24rpx;">￥20</span>
					</div>
					<div class="flex">
						<span>1.</span>
						<span>单剪</span>
						<span style="color: red;margin-left: 24rpx;">￥40</span>
					</div>
				</div>
			</u-cell>
			
			<u-collapse :value="['code']" style="background-color: #FFFFFF;margin-top: 24rpx;">
				<u-collapse-item
				  title="消费二维码"
				  name="code"
				  style="text-align: center;"
				>
				  <text class="u-collapse-content">进店消费，出示二维码</text>
				  <div style="height: 24rpx;"></div>
				  <!-- 二维码 -->
				  <tki-qrcode
				      ref="healthCode"
				      cid="healthCode"
				      :val="orderData.uid"
					  foreground=""
					  pdground=""
				      :size="320"
				      :onval="true"
				      :loadMake="true"
				  />
				</u-collapse-item>
			</u-collapse>
			
			<u-cell style="background-color: #FFFFFF;margin-top: 24rpx;" title="订单信息">
				<div slot="label">
					<div class="flex">
						<span>订单编号：</span>
						<u-tooltip text="12316546541231" direction="bottom"></u-tooltip>
					</div>
					<div class="flex">
						<span>下单时间：</span>
						<span>{{orderData.createdTime}}</span>
					</div>
					<div class="flex">
						<span>支付方式：</span>
						<span>微信支付</span>
					</div>
					<div class="flex">
						<span>支付时间：</span>
						<span>2022-02-19 21:00:00</span>
					</div>
				</div>
			</u-cell>
			
			
		</div>
		
		
		<u-tabbar
			:fixed="true"
			:placeholder="true"
			:safeAreaInsetBottom="true"
		>
			<div v-if="orderData" style="width: 100%;height: 100%;" class="flex flex-center">
				<div class="flex" style="padding: 0 24rpx;">
					合计：<div style="color: red;"><span>￥</span>{{orderData.totalPrice}}</div>
				</div>
				<div style="width: 0; flex:1;padding-right: 24rpx;" class="flex">
					<u-button type="primary" text="立即消费" @click="onClickSubmit()"></u-button>
				</div>
			</div>
		</u-tabbar>
	</view>
</template>

<script>
	import TkiQrcode from '@/components/tki-qrcode/tki-qrcode.vue';
	
	export default {
		components: {
			TkiQrcode,
		},
		data() {
			return {
				orderData: null,
				payments: [
					{uid: 'wx', name: '微信',},
					{uid: 'zfb', name: '支付宝',}
				],
				activePayment: 'wx',
			}
		},
		onLoad(option){
			this.getOrderData(option.uid);
		},
		methods: {
			/**
			 * 获取订单数据
			 */
			getOrderData(uid){
				if (!uid) {
					return;
				}
				this.$api.app.order.get({uid: uid}).then(res=>{
					let data = res.data;
					this.orderData = data;
				});
			},
			onClickSubmit(){
				this.$utils.showToast("开发中开发中...");
			},
		}
	}
</script>

<style>

</style>
